<?php

/* @var $this yii\web\View */

use yii\helpers\Html;

$this->title = '会员卡';
$this->params['breadcrumbs'][] = $this->title;
?>
<style>
.wxapp{ float:left;}
.member{ width:320px;height:639px; background:url(http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/memberbg1.png) no-repeat; overflow:hidden; margin-bottom:45px;}
.member-tit{ font-size:16px; color:#000000; text-align:center; margin-top:32px;}
.membercard{ width:266px; height:166px;background:url(http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/temp1.png) no-repeat; margin:15px auto; padding:15px 15px;}
.cardlogo{ float:left; width:37px; height:37px; margin-right:10px;}
.card-name{ float:left;}
.card-name p, .card-name span{ font-size:12px; color:#fff; margin-bottom:0px;}
.card-code{ float:right; margin-top:5px;}
.card-bottom{ margin-top:75px;}
.card-number{ float:left; font-size:13px; color:#fff;}
.card-ques{ float:right; width:14px; height:15px; background:url(http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/i.png) no-repeat;}
.credit-item{ border-right:1px solid #efefef;}
.credit p{ font-size:11px; color:#222222; text-align:center; margin-bottom:5px;}
.credit span{ display:block; font-size:14px; color:#3d925b; text-align:center;}
.scode-btn{ width:153px; height:29px; line-height:29px; border:1px solid #3d925b; border-radius:2px; color:#3d925b; text-align:center; margin:20px auto 5px;}
.card-tax{ text-align:center; margin-bottom:10px;}
.card-tax p{ display:inline-block; font-size:12px; color:#9e9e9e; margin-bottom:0px;}
.cardnews{ padding:0px 0px 0px 15px; height:50px; line-height:50px; border-bottom:1px solid #efefef;}
.cardnews-left{ float:left;}
.cardnews-left p{ font-size:14px; color:#222222; margin-bottom:0px;}
.cardnews-left span{ font-size:10px; color:#9f9f9f;}
.cardnews-phone{ float:right; width:58px; height:34px; background:url(http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/card-phone.png) center center no-repeat; margin-top:8px; border-left:1px solid #efefef;}
.cardnews-right{ float:right; width:37px; height:50px; background:url(http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/comein.png) center center no-repeat;}
.active-tit{ font-size:12px; color:#9e9e9e; padding:5px 0px; border-bottom:1px solid #f8f8f8;}
.activate{ padding:30px 20px 2px;}
.active-box{ height:40px; line-height:40px; border-bottom:1px solid #f8f8f8; overflow:hidden;}
.active-box p{ float:left; font-size:13px; color:#222222; width:60px;}
.active-box span{ display:block; float:left; font-size:12px; color:#9e9e9e;}
.active-box i{float:right;width:7px; height:40px; background:url(http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/comein.png) center center no-repeat;}
.active-mess{ width:148px; height:11px;background:url(http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/checked.png) center center no-repeat; margin:120px auto 0px;}
.active-btn{ width:292px; height:39px; line-height:39px; text-align:center; border-radius:5px; background:#3d925b; color:#fff; font-size:14px; margin:20px auto 0px;}
.memberset{ position:relative; float:left; margin-left:20px; width:556px; border:1px solid #cccccc;border-radius:8px; min-height:1400px; padding:0px 20px; background:#f8f8f8;}
.jiantou{ display:block; position:absolute; left:-5px; top:20px; width:5px; height:9px;background:url(http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/jiantou.png) no-repeat;}
.memset-box{ margin:12px 0px 0px;}
.menberset-tit{font-size:14px;color:#000000; line-height:40px; height:40px; margin:5px 0px 15px; border-bottom:1px solid #cccccc; font-weight:bold;}
.set-tit{ float:left; width:100px; line-height:30px; font-size:14px; color:#000000; margin-right:14px; text-align:right; margin-bottom:0px;}
.set-tit span{ color:#dc1b10;}
.set-name{display:block; line-height:30px; font-size:14px; color:#000000;}
.set-right{ float:left;}
.set-logo{ border-radius:50%;}
.set-logohint{ font-size:14px; color:#717171; margin:5px 0px 0px;}
.set-logohint a{ color:#20a0ff;}
.setinput-text{ width:198px; height:30px; line-height:30px; padding:0px 10px; background:#fff; border:1px solid #cccccc;}
.setshort-text{width:66px; height:30px; line-height:30px; padding:0px 10px; background:#fff;border:1px solid #cccccc;}
.set-temp{ float:left; width:108px; height:30px; line-height:30px; border:1px solid #cccccc; border-radius:2px;}
.set-temp img{ margin:0px 5px 0px 10px;}
.settemp-select{ font-size:14px; color:#20a0ff; line-height:30px; margin-left:5px; cursor:pointer;}
.set-power{ overflow:hidden;}
.memset-box label{ font-weight:normal;}
.setpower-hint{ font-size:12px; color:#8b8b8b; padding:5px 0px 0px 10px;}
.set-usetext{ width:298px; height:112px; padding:8px; resize:none; line-height:22px;}
.setuse-example{ font-size:12px; color:#8b8b8b; line-height:20px;}
.setuse-example p{ float:left; margin-right:10px;}
.setuse-example span{ display:block;}
.set-zt{ line-height:30px; margin-bottom:0px;}
.set-zt label{ margin:0px 15px 0px 2px;}
.baocun{ position:fixed; left:0px; bottom:50px; width:100%; height:68px; background:#d9edf7; border:1px solid #bce8f1; border-radius:4px; padding-left:15%;}
.baocun-back{ float:left; display:block; width:84px; height:36px; background:#f0ad4e; color:#fff; font-size:14px; line-height:36px; text-align:center; border-radius:4px; margin-left:20px; margin-top:16px; cursor:pointer;}
.baocun-submit{ float:left;display:block; width:84px; height:36px; background:#5bc0de; color:#fff; font-size:14px; line-height:36px; text-align:center; border-radius:4px; border:none; margin-left:20px;margin-top:16px; cursor:pointer;}
.falsehint{ font-size:12px; color:#dc1b10; margin:5px 0px 0px;}
.banbtn{float:left; background:#f05a38; width:84px; height:36px;color:#fff; font-size:14px; line-height:36px; text-align:center; border-radius:4px; border:none; margin-left:20px;margin-top:16px; cursor:pointer;}
.delbtn{float:left; background:#ed434f; width:84px; height:36px;color:#fff; font-size:14px; line-height:36px; text-align:center; border-radius:4px; border:none; margin-left:20px;margin-top:16px; cursor:pointer;}
.qibtn{float:left; background:#5cb85c; width:84px; height:36px;color:#fff; font-size:14px; line-height:36px; text-align:center; border-radius:4px; border:none; margin-left:20px;margin-top:16px; cursor:pointer;}
/*弹出自定义模板*/
@media screen and (min-width: 768px) {
.modal-width {width:829px}
}
.vip-nav{ float:right; margin-top:2px;}
.vip-nav p{ float:right; line-height:21px; height:21px; padding:0px 10px; margin-bottom:0px; font-size:14px; color:#666666; cursor:pointer;}
.vip-nav .active{ background:#20a0ff; border-radius:3px; color:#fff;}
.viptemp-pane{ display:none;}
.viptemp-list{ width:610px; height:483px; overflow-x:hidden; overflow-y:scroll; margin:0px auto;}
.viptemp-item{ position:relative; float:left; margin:0px 10px 20px 10px;}
.viptemp-img{width:177px; height:106px;}
.viptemp-mask{ display:none; position:absolute; left:0px; top:0px; width:177px; height:106px;background:url(http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/viptemp-mask.png) no-repeat; z-index:100;}
.viptemp-item.active .viptemp-mask{ display:block;}
.viptemp-card{ position:absolute; left:0px; top:0px; width:177px; height:106px; background-size:100% 100%; padding:15px 15px; z-index:99;}
.viptemp-logo{ float:left; width:24px; height:24px; margin-right:10px;}
.viptemp-name{ float:left; margin:-8px 0px 0px -10px;}
.viptemp-name p, .viptemp-name span{ display:block; font-size:10px; color:#fff; margin-bottom:0px; -webkit-transform:scale(0.7);-moz-transform:scale(0.7);transform: scale(0.7)}
.viptemp-code{ float:right;}
.viptemp-bottom{ margin-top:42px;}
.viptemp-number{ float:left; font-size:13px; color:#fff;}
.viptemp-ques{ float:right; width:14px; height:15px; background:url(http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/i.png) no-repeat;}
.viptemp-title{ font-size:12px; color:#000000; line-height:25px;}
.viptemp-btns{ text-align:center;}
.viptemp-false{ display:inline-block; width:120px; height:30px; line-height:30px; text-align:center; background:#b2b2b2; border-radius:5px; font-size:14px; color:#fff; margin:20px 20px 30px 0px; cursor:pointer;}
.viptemp-true{ display:inline-block; width:120px; height:30px; line-height:30px; text-align:center; background:#20a0ff; border-radius:5px; font-size:14px; color:#fff; cursor:pointer;}
.viptemp-download{width:610px; height:483px;margin:0px auto;}
.viptemp-file{}
</style>
<div class="panel panel-default" id="aa">
	<div class="panel-body clearfix">
    	<div class="wxapp">
        	<div class="member">
                <div class="member-tit">会员卡</div>
                <div class="membercard">
                    <div class="clearfix">
                        <div class="cardlogo"><img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/cardlogo1.png" width="37" height="37"></div>
                        <div class="card-name"><p>真好吃美食店</p><span>{{cardname}}</span></div>
                        <div class="card-code"><img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/card-code.png" width="19" height="19"></div>
                    </div>
                    <div class="card-bottom clearfix">
                    	<div class="card-number">NO.1234 5678 9012</div>
                        <div class="card-ques"></div>
                    </div>
                </div>
                <div class="credit clearfix">
                	<div class="col-md-4 credit-item">
                    	<p>我的积分</p>
                        <span>9</span>
                    </div>
                    <div class="col-md-4 credit-item">
                    	<p>等级</p>
                        <span>3</span>
                    </div>
                    <div class="col-md-4 credit-item" style="border-right:none;">
                    	<p>优惠券</p>
                        <span>查看</span>
                    </div>
                </div>
                <div class="scode-btn">扫码点菜</div>
                <div class="card-tax">
                	<p v-if="hyChecked.choose">点菜享<span>{{hyChecked.sale}}</span>折</p>	
                    <p v-if="hyChecked.choose&&(jfChecked.choose||kkChecked.choose)">，</p>
                    <p v-if="jfChecked.choose||kkChecked.choose">更有积分相送</p>
                 </div>
                <div class="cardnews clearfix" style="line-height:inherit;">
                	<div class="cardnews-left">
                        <p>创意产业园</p>
                        <span>300米 | 苏州市工业园区若水路1号</span>
                    </div>
                    <div class="cardnews-phone"></div>
                </div>
                <div class="cardnews clearfix">
                	<div class="cardnews-left">积分商城</div>
                    <div class="cardnews-right"></div>
                </div>
                <div class="cardnews clearfix">
                	<div class="cardnews-left">个人信息</div>
                    <div class="cardnews-right"></div>
                </div>
                <div class="cardnews clearfix">
                	<div class="cardnews-left">适用门店</div>
                    <div class="cardnews-right"></div>
                </div>
                <div class="cardnews clearfix">
                	<div class="cardnews-left">会员卡详情</div>
                    <div class="cardnews-right"></div>
                </div>
            </div>
            <div class="member">
            	<div class="member-tit">激活会员卡</div>
                <div class="activate">
                	<div class="active-tit">必填信息</div>
                    <div class="active-box clearfix"><p>手机</p><span>请填写手机号</span></div>
                    <div class="active-tit">选填信息</div>
                    <div class="active-box clearfix" v-if="setsex.choose"><p>性别</p><i></i></div>
                    <div class="active-box clearfix" v-if="setbirthday.choose"><p>生日</p></div>
                    <div class="active-box clearfix" v-if="setname.choose"><p>姓名</p><span>请输入姓名</span></div>
                    <div class="active-box clearfix" v-if="setemail.choose"><p>邮箱</p><span>请输入邮箱</span></div>
                    <div class="active-box clearfix"><p>职业</p></div>
                </div>
                <div class="active-mess"></div>
                <div class="active-btn">立即激活</div>
            </div>
        </div>
        <div class="memberset">
        	<em class="jiantou"></em>
            <div class="menberset-tit">会员卡基本信息</div>
            <div class="memset-box clearfix">
            	<p class="set-tit">店铺名称：</p>
                <span class="set-name">真好吃美食店</span>
            </div>
             <div class="memset-box clearfix">
            	<p class="set-tit" style="margin-top:10px;">店铺logo：</p>
                <div class="set-right">
                	<img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/cardlogo1.png" width="58" height="58" class="set-logo">
                    <p class="set-logohint">如需修改店铺信息，请在<a href="#" target="_blank">店铺设置</a>中更新。</p>
                </div>
            </div>
            <div class="memset-box clearfix">
            	<p class="set-tit"><span>*</span>会员卡名称：</p>
                <div class="set-right">
                	<input type="text" class="setinput-text" placeholder="最多可输入6个字符" v-model="cardname" v-on:focus="changeCount('cnhint')" />
                    <p class="falsehint" v-if="cnhint">会员卡名称不能为空</p>
                </div>
            </div>
            <div class="memset-box clearfix">
            	<p class="set-tit">会员卡模板：</p>
                <div class="set-temp">
                	<img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/set-temp1.png" width="24" height="16">
                    <span>绿色森林</span>
                </div>
                <span class="settemp-select">修改</span>
            </div>
            <div class="memset-box clearfix">
            	<p class="set-tit"><span>*</span>会员权益：</p>
                <div class="set-right">
                    <div class="set-power">
                    	<input type="checkbox"  v-model="hyChecked.choose" v-on:focus="changeCount('hyhint')"/>
                        <label>会员折扣</label>
                        <input type="text"  class="setshort-text" v-bind:disabled="!hyChecked.choose" v-bind:style="hyChecked.choose ? '' : 'background:#CCC'" v-model="hyChecked.sale" v-on:focus="changeCount('hyhint')" />
                        <label>折</label>
                    </div>
                    <p class="falsehint" v-if="hyhint">会员折扣必须大于0小于10</p>
                    <p class="setpower-hint" v-if="!hyhint">说明：设置8.7折，代表开通会员的用户小程序购物都是8.7折</p>
                    <div class="set-power">
                    	<input type="checkbox" v-model="jfChecked.choose" v-on:focus="changeCount('jfhint')" />
                        <label>送积分&nbsp;&nbsp;每消费</label>
                        <input type="text" class="setshort-text" v-bind:disabled="!jfChecked.choose" v-bind:style="jfChecked.choose ? '' : 'background:#CCC'" v-model="jfChecked.price" v-on:focus="changeCount('jfhint')" />
                        <label>元&nbsp;&nbsp;送</label>
                        <input type="text" class="setshort-text" v-bind:disabled="!jfChecked.choose" v-bind:style="jfChecked.choose ? '' : 'background:#CCC'" v-model="jfChecked.point" v-on:focus="changeCount('jfhint')" />
                        <label>积分</label>
                    </div>
                    <p class="falsehint" v-if="jfhint1">金钱数必须大于0</p>
                    <p class="falsehint" v-if="jfhint2">积分必须大于0</p>
                    <p class="setpower-hint">说明：消费1元赚1个积分</p>
                    <div class="set-power">
                    	<input type="checkbox" v-model="kkChecked.choose" v-on:focus="changeCount('kkhint')" />
                        <label>送积分&nbsp;&nbsp;开卡赠送</label>
                        <input type="text" class="setshort-text" v-bind:disabled="!kkChecked.choose" v-bind:style="kkChecked.choose ? '' : 'background:#CCC'" v-model="kkChecked.point" v-on:focus="changeCount('kkhint')" />
                        <label>积分</label>
                    </div>
                     <p class="falsehint" v-if="kkhint">积分必须大于0</p>
                     <p class="falsehint" v-if="allhint">必须选一种优惠</p>
                </div>
            </div>
            <div class="menberset-tit" style="margin-top:30px;">附加信息</div>
            <div class="memset-box clearfix">
            	<p class="set-tit"><span>*</span>餐厅电话：</p>
                <div class="set-right">
                    <input type="text" class="setinput-text" placeholder="请输入手机号或固定电话" v-model="shoptel" v-on:focus="changeCount('telhint')" />
                    <p class="falsehint" v-if="telhint">请输入餐厅电话</p>
                </div>
            </div>
            <div class="memset-box clearfix">
            	<p class="set-tit"><span>*</span>会员期限：</p>
                <div class="set-right">
                    <div class="set-radio" style="line-height:30px;">
                        <input type="radio" value="永久有效" v-model="settime.name" v-on:focus="changeCount('dayhint')" />
                        <label>永久有效</label>
                    </div>
                    <div class="set-radio" style="line-height:30px;">
                        <input type="radio" value="有效天数" v-model="settime.name" v-on:focus="changeCount('dayhint')" />
                        <input type="text" class="setshort-text" v-model="settime.day" v-bind:style="settime.name=='有效天数' ? '' : 'background:#CCC'" v-on:focus="changeCount('dayhint')" />
                        <label>天</label>
                    </div>
                    <p class="falsehint" v-if="dayhint">会员卡有效天数不能为空或者小于0的数</p>
                </div>
            </div>
            <div class="memset-box clearfix">
            	<p class="set-tit"><span>*</span>使用须知：</p>
                <div class="set-right">
                	<textarea class="set-usetext" placeholder="会员特权会根据您上文的勾选情况系统自动生成。此处可填写其它补充信息以便会员知晓，最多可输入300字符 " v-model="usemessage" v-on:focus="changeCount('usehint')"></textarea>
                    <div class="setuse-example clearfix">
                       <p>例如:</p>
                       <div style="float:left;">
                          <span>每人限领一张</span>
                          <span>1.会员卡仅限申请者本人使用，会员卡会籍及卡</span>
                          <span>内积分不可转让或出借；</span>
                          <span>2.请在结账时主动出示会员卡；</span>
                       </div>
                    </div>
                    <p class="falsehint" v-if="usehint">使用须知不能为空或者超过300字符</p>
                </div>
            </div>
            <div class="menberset-tit" style="margin-top:20px;">领取设置</div>
            <div class="memset-box clearfix">
            	<p class="set-tit"><span>*</span>激活设置：</p>
                <div class="set-right">
                	<p class="set-zt">
                    	<input type="radio" name="set-activated" value="0" v-model="setact" />
                        <label>无需激活</label>
                        <input type="radio" name="set-activated" value="1" v-model="setact" />
                        <label>需要激活</label>
                    </p>
                    <div v-if="setact=='1'">
                        <p class="set-zt">
                            <input type="checkbox" checked disabled />
                            <label>填写手机号(必填)</label>
                        </p>
                        <p class="set-zt">
                            <input type="checkbox" v-model="setbirthday.choose" />
                            <label>填写生日</label>
                            <input type="radio" value="0" v-bind:disabled="!setbirthday.choose" v-model="setbirthday.type" />
                            <label>必填</label>
                            <input type="radio" value="1" v-bind:disabled="!setbirthday.choose" v-model="setbirthday.type" />
                            <label>选填</label>
                        </p>
                        <p class="set-zt">
                            <input type="checkbox" v-model="setsex.choose" />
                            <label>填写性别</label>
                            <input type="radio" value="0" v-bind:disabled="!setsex.choose" v-model="setsex.type" />
                            <label>必填</label>
                            <input type="radio" value="1" v-bind:disabled="!setsex.choose" v-model="setsex.type" />
                            <label>选填</label>
                        </p>
                        <p class="set-zt">
                            <input type="checkbox" v-model="setname.choose" />
                            <label>填写姓名</label>
                            <input type="radio" value="0" v-bind:disabled="!setname.choose" v-model="setname.type" />
                            <label>必填</label>
                            <input type="radio" value="1" v-bind:disabled="!setname.choose" v-model="setname.type" />
                            <label>选填</label>
                        </p>
                        <p class="set-zt">
                            <input type="checkbox" v-model="setemail.choose" />
                            <label>填写邮箱</label>
                            <input type="radio" value="0" v-bind:disabled="!setemail.choose" v-model="setemail.type" />
                            <label>必填</label>
                            <input type="radio" value="1" v-bind:disabled="!setemail.choose" v-model="setemail.type" />
                            <label>选填</label>
                        </p>
                    </div>
                    <div class="setpower-hint">如需在门店使用请设置为“需要激活”</div>
                </div>
            </div>
        </div>
        <div class="baocun">
        	<div class="banbtn">禁用</div>
            <div class="qibtn">启用</div>
            <div class="delbtn">删除</div>
            <a href="#" class="baocun-back">取消</a>
            <span  class="baocun-submit" @click="submitForm">保存</span>
        </div>
    </div>
    <!--弹出选择模板-->
    <div class="modal fade" id="viptemp" tabindex="-1" role="dialog" aria-labelledby="viptemp-tit" aria-hidden="true">
        <div class="modal-dialog modal-width">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="vip-nav clearfix"><p class="active" data-id="1">选择模板</p><p data-id="2">自定义模板</p></div>
                    <h4 class="modal-title" id="viptemp-tit">
                        请选择需要模板
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="viptemp-panes">
                        <div class="viptemp-pane" style="display:block;">
                            <div class="viptemp-list clearfix">
                                <div class="viptemp-item active">
                                    <img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/temp1.png" class="viptemp-img">
                                    <div class="viptemp-mask"></div>
                                    <div class="viptemp-card">
                                        <div class="clearfix">
                                            <div class="viptemp-logo"><img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/cardlogo1.png" width="24" height="24"></div>
                                            <div class="viptemp-name"><p>真好吃美食店</p><span>{{cardname}}</span></div>
                                            <div class="viptemp-code"><img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/card-code.png" width="15" height="15"></div>
                                        </div>
                                        <div class="viptemp-bottom clearfix">
                                            <div class="viptemp-number">NO.1234 5678 9012</div>
                                            <div class="viptemp-ques"></div>
                                        </div>
                                    </div>
                                    <p class="viptemp-title">当前模板——<span>绿色森林</span>.jpg</p>
                                </div>
                                <div class="viptemp-item">
                                    <img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/viptemp2.png" class="viptemp-img">
                                    <div class="viptemp-mask"></div>
                                    <div class="viptemp-card">
                                        <div class="clearfix">
                                            <div class="viptemp-logo"><img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/cardlogo1.png" width="24" height="24"></div>
                                            <div class="viptemp-name"><p>真好吃美食店</p><span>{{cardname}}</span></div>
                                            <div class="viptemp-code"><img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/card-code.png" width="15" height="15"></div>
                                        </div>
                                        <div class="viptemp-bottom clearfix">
                                            <div class="viptemp-number">NO.1234 5678 9012</div>
                                            <div class="viptemp-ques"></div>
                                        </div>
                                    </div>
                                    <p class="viptemp-title"><span>少女系列</span>.jpg</p>
                                </div>
                                <div class="viptemp-item">
                                    <img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/viptemp3.png" class="viptemp-img">
                                    <div class="viptemp-mask"></div>
                                    <div class="viptemp-card">
                                        <div class="clearfix">
                                            <div class="viptemp-logo"><img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/cardlogo1.png" width="24" height="24"></div>
                                            <div class="viptemp-name"><p>真好吃美食店</p><span>{{cardname}}</span></div>
                                            <div class="viptemp-code"><img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/card-code.png" width="15" height="15"></div>
                                        </div>
                                        <div class="viptemp-bottom clearfix">
                                            <div class="viptemp-number">NO.1234 5678 9012</div>
                                            <div class="viptemp-ques"></div>
                                        </div>
                                    </div>
                                    <p class="viptemp-title"><span>轻快明亮</span>.jpg</p>
                                </div>
                                <div class="viptemp-item">
                                    <img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/viptemp4.png" class="viptemp-img">
                                    <div class="viptemp-mask"></div>
                                    <div class="viptemp-card">
                                        <div class="clearfix">
                                            <div class="viptemp-logo"><img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/cardlogo1.png" width="24" height="24"></div>
                                            <div class="viptemp-name"><p>真好吃美食店</p><span>{{cardname}}</span></div>
                                            <div class="viptemp-code"><img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/card-code.png" width="15" height="15"></div>
                                        </div>
                                        <div class="viptemp-bottom clearfix">
                                            <div class="viptemp-number">NO.1234 5678 9012</div>
                                            <div class="viptemp-ques"></div>
                                        </div>
                                    </div>
                                    <p class="viptemp-title"><span>柠檬心情</span>.jpg</p>
                                </div>
                                <div class="viptemp-item">
                                    <img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/viptemp5.png" class="viptemp-img">
                                    <div class="viptemp-mask"></div>
                                    <div class="viptemp-card">
                                        <div class="clearfix">
                                            <div class="viptemp-logo"><img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/cardlogo1.png" width="24" height="24"></div>
                                            <div class="viptemp-name"><p>真好吃美食店</p><span>{{cardname}}</span></div>
                                            <div class="viptemp-code"><img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/card-code.png" width="15" height="15"></div>
                                        </div>
                                        <div class="viptemp-bottom clearfix">
                                            <div class="viptemp-number">NO.1234 5678 9012</div>
                                            <div class="viptemp-ques"></div>
                                        </div>
                                    </div>
                                    <p class="viptemp-title"><span>时尚餐饮</span>.jpg</p>
                                </div>
                                <div class="viptemp-item">
                                    <img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/viptemp6.png" class="viptemp-img">
                                    <div class="viptemp-mask"></div>
                                    <div class="viptemp-card">
                                        <div class="clearfix">
                                            <div class="viptemp-logo"><img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/cardlogo1.png" width="24" height="24"></div>
                                            <div class="viptemp-name"><p>真好吃美食店</p><span>{{cardname}}</span></div>
                                            <div class="viptemp-code"><img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/card-code.png" width="15" height="15"></div>
                                        </div>
                                        <div class="viptemp-bottom clearfix">
                                            <div class="viptemp-number">NO.1234 5678 9012</div>
                                            <div class="viptemp-ques"></div>
                                        </div>
                                    </div>
                                    <p class="viptemp-title"><span>企业通用</span>.jpg</p>
                                </div>
                                <div class="viptemp-item">
                                    <img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/viptemp7.png" class="viptemp-img">
                                    <div class="viptemp-mask"></div>
                                    <div class="viptemp-card">
                                        <div class="clearfix">
                                            <div class="viptemp-logo"><img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/cardlogo1.png" width="24" height="24"></div>
                                            <div class="viptemp-name"><p>真好吃美食店</p><span>{{cardname}}</span></div>
                                            <div class="viptemp-code"><img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/card-code.png" width="15" height="15"></div>
                                        </div>
                                        <div class="viptemp-bottom clearfix">
                                            <div class="viptemp-number">NO.1234 5678 9012</div>
                                            <div class="viptemp-ques"></div>
                                        </div>
                                    </div>
                                    <p class="viptemp-title"><span>西瓜天堂</span>.jpg</p>
                                </div>
                                <div class="viptemp-item">
                                    <img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/viptemp8.png" class="viptemp-img">
                                    <div class="viptemp-mask"></div>
                                    <div class="viptemp-card">
                                        <div class="clearfix">
                                            <div class="viptemp-logo"><img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/cardlogo1.png" width="24" height="24"></div>
                                            <div class="viptemp-name"><p>真好吃美食店</p><span>{{cardname}}</span></div>
                                            <div class="viptemp-code"><img src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/card-code.png" width="15" height="15"></div>
                                        </div>
                                        <div class="viptemp-bottom clearfix">
                                            <div class="viptemp-number">NO.1234 5678 9012</div>
                                            <div class="viptemp-ques"></div>
                                        </div>
                                    </div>
                                    <p class="viptemp-title"><span>梦幻星空</span>.jpg</p>
                                </div>
                            </div>
                        </div>
                        <div class="viptemp-pane">
                        	<div class="viptemp-download">
                            	<!--未选择图片状态-->
                                <div class="viptemp-file"><input type="file" /></div>
                                <!--未选择图片状态end-->
                            </div>
                        </div> 
                    </div>
                    <div class="viptemp-btns">
                        <div class="viptemp-false">取消</div>
                        <div class="viptemp-true" data-id="1" data-src="http://sj.repai.com/templates/m7/public/shopcenter/images/wxapp/temp1.png" data-tit="绿色森林">确定</div>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!--弹出选择模板end-->
</div>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
 var vm = new Vue({
	 el:'#aa',
	 data:{
		 jfChecked:{
			 choose:true,
			 price:'',
			 point:'',
		 },
		 kkChecked:{
			 choose:true,
			 point:''
			 },
		 hyChecked:{
			choose:true,
			sale:'' 
		 },
		 settime: {   //有效期
            name: '永久有效',
            day: ''
         },
		 setact:'1',   //激活
		 setbirthday:{   //生日
            choose: true,
            type: '1'
         },
		 setsex:{   //性别
            choose: true,
            type: '1'
         },
		 setname:{   //姓名
            choose: true,
            type: '1'
         },
		 setemail:{   //邮箱
            choose: true,
            type: '1'
         },
		 cardname:'会员卡',
		 shoptel:'',   //餐厅电话
		 usemessage:'',   //使用须知
		 cnhint:false,  //验证会员卡
		 telhint:false,  //验证手机号
		 hyhint:false,   //验证会员折扣
		 jfhint1:false,  //验证送积分
		 jfhint2:false,
		 kkhint:false,
		 dayhint:false,   //验证会员卡有效天数
		 usehint:false,   //验证使用须知
		 allhint:false,   //必须选一种优惠
	},
	created:function(){
		
	},
	methods:{
		submitForm: function() {
			var data = {
					cardname:this.cardname,
					shoptel:this.shoptel,
					usemessage:this.usemessage,
					hyChecked:this.hyChecked,
					jfChecked:this.jfChecked,
					kkChecked:this.kkChecked,
					settime:this.settime,
					setact:this.setact,
					setbirthday:this.setbirthday,
					setsex:this.setsex,
					setname:this.setname,
					setemail:this.setemail,	
			}
			console.log(data);
			if(this.cardname==''){
				 this.cnhint=true;
				 return;
			}
			if(this.hyChecked.choose==true&&!(/^([1-9])$/.test(this.hyChecked.sale))){
				this.hyhint=true;
				return;
			}
			if(this.jfChecked.choose==true&&!(Number(this.jfChecked.price) > 0)){
				this.jfhint1=true;
				return;
			}else if(this.jfChecked.choose==true&&!(Number(this.jfChecked.point) > 0)){
				this.jfhint2=true;
				return;
			}
			if(this.kkChecked.choose==true&&!(Number(this.kkChecked.point) > 0)){
				this.kkhint=true;
				return;
			}
			if(this.hyChecked.choose==false&&this.jfChecked.choose==false&&this.kkChecked.choose==false){
				this.allhint=true;
				return;
			}
			if(this.shoptel==''){
				 this.telhint=true;
				 return;
			} 
			if(this.settime.name=='有效天数'&&!(Number(this.settime.day) > 0)){
				this.dayhint=true;
			}
			if(this.usemessage.length>300 || this.usemessage==''){
				this.usehint=true;
			} 
			 
        },
		changeCount: function(e) {
			if(e == 'cnhint'){
				 this.cnhint=false;
			}else if(e == 'telhint'){
				this.telhint=false;
			}else if(e == 'hyhint'){
				this.hyhint=false;
				this.allhint=false;
			}else if(e == 'jfhint'){
				this.jfhint1=false;
				this.jfhint2=false;
				this.allhint=false;
			}else if(e == 'kkhint'){
				this.kkhint=false;
				this.allhint=false;
			}else if(e == 'dayhint'){
				this.dayhint=false;
			}else if(e == 'usehint'){
				this.usehint=false;
			}
			
		}
	},
	watch:{
	}
})
</script>
<script>
$(function(){
	$(".settemp-select").click(function() {
        $("#viptemp").modal("show");
    });
	$(".vip-nav p").click(function() {
        var dataid=$(this).attr("data-id");
		$(this).addClass("active").siblings().removeClass("active");
		$('.viptemp-panes>div:eq('+$(this).index()+')').show().siblings().hide();
		$(".viptemp-true").attr("data-id",dataid);
    });
	$(".viptemp-item").click(function() {
		var imgsrc=$(this).children(".viptemp-img").attr("src");
		var title=$(this).children(".viptemp-title").children("span").text();
        $(this).addClass("active").siblings().removeClass("active");
		$(".viptemp-true").attr("data-src",imgsrc);
		$(".viptemp-true").attr("data-tit",title);
    });
	$(".viptemp-true").click(function() {
        var dataid=$(this).attr("data-id");
		var imgsrc=$(this).attr("data-src");
		var title=$(this).attr("data-tit");
		if(dataid=='1'){
			$("#viptemp").modal("hide");
			$(".membercard").css({"background":"url("+imgsrc+") no-repeat","background-size":"100% 100%"});
			$(".set-temp").children("img").attr("src",imgsrc);
			$(".set-temp").children("span").text(title);
			}
    });
	$(".viptemp-false").click(function() {
        $("#viptemp").modal("hide");
    });
});
</script>
